{% extends 'base.html' %}

{% block jquerycript %}
	$(function() {$("ul.tabs").tabs("div.panes > div");});
{% endblock %}

{% block ruta %}
	<li><a href="/">Inicio</a></li>
	<li>>></li>
	<li><a href="/academico/">Académico</a></li>
	<li>>></li>
	<li>Programas</li>
{% endblock %}

{% block contenido %}
	<div id="content" class="with_sidebar">
		<h1>Programas</h1>
		<ul class="tabs">
			{% for programa in programas %}
				<li><a href="#" title="{{ programa.nombre }}">{{ programa.abreviatura }}</a></li>
			{% endfor %}
		</ul>		
		<div class="panes">
			{% for programa in programas %}
				<div class="panesDiv">
					<h2 style="margin-top:{{ margintop }}px;">Información básica</h2>
					<table>
						<tr>
							<td valign="top" style="text-align:left; width: 370px;">
								<table style="text-align:left;">
									<tr>
										<td valign="top" style="text-align:left; width: 130px;"><strong>Código: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.codigo }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Nombre completo: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.nombre }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Tipo de programa: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.tipo_programa }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Descripción: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.descripcion }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Título: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.titulo }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Resolución: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.resolucion }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>SNIES: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.snies }}</td>
									</tr>
									<tr>
										<td valign="top" colspan="2" style="text-align:left; width: 130px;"><h2>Horarios</h2></td>
									</tr>					
									<tr>
										<td valign="top" style="text-align:left; width: 130px;"><strong>Periodicidad: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.periodicidad }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Duración: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.duracion }}</td>
									</tr>
									<!--
									<tr>
										<td valign="top" style="text-align:left"><strong>Jornada: </strong></td>				
									    <td valign="top" style="text-align:justify">{{ programa.jornada }}</td>
									</tr>
									-->
								</table>
							</td>				
						    <td valign="bottom" align="center" style="width:30px;">
						    	<img src="{{ path }}{{ programa.progreso }}" alt="Progreso" title="{{ programa.porcentaje }}%"/>
						    </td>
						    <td valign="bottom" style="text-align:justify; width:170px;">
							    <table style="text-align:left;">
									<tr>
										<td valign="top" colspan="2" style="text-align:left"><p>&nbsp;</p></td>
									</tr>
									<tr>
										<td valign="top" colspan="2" style="text-align:left"><p>&nbsp;</p></td>
									</tr>
									<tr>
										<td valign="top" colspan="2" style="text-align:left"><h2>Información Materias</h2></td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Vistas:</strong></td>				
										<td valign="top" style="text-align:justify">{{ programa.vistas }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left"><strong>Aprobadas:</strong></td>				
										<td valign="top" style="text-align:justify">{{ programa.aprobadas }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left; width: 150px;"><strong>Total Materias:</strong></td>				
										<td valign="top" style="text-align:justify">{{ programa.materias }}</td>
									</tr>
									<tr>
										<td valign="top" style="text-align:left; width: 150px;"><strong>Porcentaje aprobado:</strong></td>				
										<td valign="top" style="text-align:justify">{{ programa.porcentaje }}%</td>
									</tr>						
								</table>
						    </td>
						</tr>
					</table>
					<h2>Información adicional</h2>
					<table style="text-align:left;">
						<tr>
							<td valign="top" style="text-align:left; width: 130px;"><strong>Aptitudes: </strong></td>				
						    <td valign="top" style="text-align:justify">{{ programa.aptitudes }}</td>
						</tr>
						<tr>
							<td valign="top" style="text-align:left"><strong>Perfil profesional:</strong></td>				
						    <td valign="top" style="text-align:justify">{{ programa.perfil_profesional }}</td>
						</tr>
						<tr>
							<td valign="top" style="text-align:left"><strong>Funciones: </strong></td>				
						    <td valign="top" style="text-align:justify">{{ programa.funciones }}</td>
						</tr>					
					</table>
				</div>
			{% endfor %}
		</div>
	</div>			
{% endblock %}